import React from "react";
import{
  View,
  Text,
  StyleSheet,
  Platform,
  PixelRatio,
  Dimensions,
  Animated,
  Easing,
  Image
} from "react-native";
import {JDDevice,JDText} from "@areslabs/jdreact-core-lib";
export default class JDVideo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      translateY: new Animated.Value(0),
      textTitle: this.getIamgeUrl(this.props.textTitle)
    };
  }
 //补全路径
    handleUrl(url) {
      let reg = RegExp(/http/);
      if (!reg.test(url)) {
        return "https:" + url;
      }
      return url;
    }
  componentDidMount() {
    this.getIamgeUrl(this.props.textTitle)
    //console.dir(this.getIamgeUrl(this.props.textTitle))
    this.showHeadBar(0, this.state.textTitle.length); //从第0条开始，轮播5条数据
  }
  getIamgeUrl(data) {
        //返回分割后的数组
        let urlArray = data.split('|');
       // console.log(urlArray);
        if (data !== "") {
          return urlArray;
        }
        return null;
   }
  showHeadBar(index, count) {
   // console.log("start");
    index++;
    Animated.timing(this.state.translateY, {
      toValue: -JDDevice.getRpx(160)* index, //40为文本View的高度
      duration: 300, //动画时间
      Easing: Easing.linear,
      delay: 1500 //文字停留时间
    }).start(() => {
      //每一个动画结束后的回调
      if (index >= count) {
        index = 0;
        this.state.translateY.setValue(0);
      }
      this.showHeadBar(index, count); //循环动画
    });
  }
  render() {
    return (
      <View style={{height:this.props.bgHeight,width:JDDevice.getRpx(750)}}>
       <Image 
       source={{ uri: this.handleUrl(this.props.imagebk)}}
       style={{position:'absolute',left:0,top:0,width:JDDevice.getRpx(750),height:this.props.bgHeight}}></Image>
        <View style={styles.container}>
          <Animated.View
            style={[
              {left:this.props.bt1PositionLeft,top:this.props.bt1PositionTop},
              {
                transform: [
                  {
                    translateY: this.state.translateY
                  }
                ]
              }
            ]}
          >
            {this.state.textTitle.map((item,index)=>{
                return (
                  <View style={styles.bar} key={index}>
                     <JDText 
                    style={{color:this.props.fontColor,fontSize:this.props.fontSize,textOverflow:'ellipsis',whiteSpace:'nowrap',overflow: 'hidden',width:JDDevice.getRpx(400)}} 
                    >{item}
            </JDText>
                  </View>
                )
            })}
          </Animated.View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    marginTop:JDDevice.getRpx(5),
    height: JDDevice.getRpx(160),
    overflow: 'hidden',
    borderRadius: 14
  },
  bar: {
    height: JDDevice.getRpx(160),
    justifyContent: "center",
  },
 
});


